<template>
    <view>
        <view class="uni-padding-wrap" v-if="banners.length>0">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                            :duration="duration">
                        <swiper-item v-for="(item, index) in banners" @tap="$utils.n.ngt(item.actionLink)">
                            <image
                                    lazy-load
                                    mode="aspectFill"
                                    :src="item.imgUrl + '?x-oss-process=image/resize,h_528/auto-orient,1'"
                                    class="image height100"
                            ></image>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
        <uni-group title="领队排名">
            <uni-grid :column="4" style="text-align: center" :showBorder="false" :square="true" @change="gridChange">
                <uni-grid-item :index="1">
                    <uni-icons type="contact" size="30"></uni-icons>
                    <text class="text">靠谱活动</text>
                </uni-grid-item>
                <uni-grid-item :index="2">
                    <uni-icons type="contact" size="30"></uni-icons>
                    <text class="text">领队招募</text>
                </uni-grid-item>
                <uni-grid-item :index="3">
                    <uni-icons type="contact" size="30"></uni-icons>
                    <text class="text">关爱所</text>
                </uni-grid-item>
                <uni-grid-item :index="4">
                    <uni-icons type="contact" size="30"></uni-icons>
                    <text class="text">靠谱文章</text>
                </uni-grid-item>
            </uni-grid>
        </uni-group>
        <uni-group title="领队推荐">
            <uni-list>
                <uni-list :border="true">
                    <!-- 显示圆形头像 -->
                    <uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
                    <!-- 右侧带角标 -->
                    <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat>
                    <!-- 头像显示圆点 -->
                    <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
                    <!-- 头像显示角标 -->
                    <uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat>
                    <!-- 显示多头像 -->
                    <uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
                    <!-- 自定义右侧内容 -->
                    <uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
                        <view class="chat-custom-right">
                            <text class="chat-custom-text">刚刚</text>
                            <!-- 需要使用 uni-icons 请自行引入 -->
                            <uni-icons type="star-filled" color="#999" size="18"></uni-icons>
                        </view>
                    </uni-list-chat>
                </uni-list>
            </uni-list>
            <uni-list :border="true" v-show="listData.length ==0">
                <uni-list-item title="暂无更多数据" class="no-content"></uni-list-item>
            </uni-list>
        </uni-group>
    </view>
</template>

<script>

    export default {
        components: {},
        computed: {},
        data() {
            return {
                avatarList: [{
                    url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
                }, {
                    url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
                }, {
                    url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
                }],
                // 列表信息
                listData: [],
                banners: [],
                indicatorDots: true,
                autoplay: true,
                interval: 2000,
                duration: 500
            }
        },
        onLoad() {
            this.loadBanner()
            this.loadData()
        },

        onTabItemTap(e) {
            uni.setStorageSync('tabItemIndex', e.index)
        },
        onReady() {
        },
        onPullDownRefresh() {
        },
        onReachBottom() {

        },
        methods: {
            gridChange(e) {
                switch (e.detail.index) {
                    case 1:
                        uni.navigateTo({
                            url: '/pages/activity/activity-list'
                        })
                        break
                    case 2:
                        uni.navigateTo({
                            url: '/pages/activity/activity-list'
                        })
                        break
                    case 3:
                        break
                    case 4:
                        uni.navigateTo({
                            url: '/pages/article/article'
                        })
                        break
                }
            },
            loadBanner: function () {
                this.$http.get('/banner/getList?isDisabled=' + false).then(res => {
                    this.banners = res.data || []
                }).finally(() => {
                })
            },
            loadData: function () {

            }
        },
        watch: {}
    }
</script>

<style>
    .uni-padding-wrap {
        padding: 0 0 0 0;
    }

    .uni-media-list-logo {
        height: 80px;
        width: 80px;
        margin-right: 8px;
    }

    .uni-media-list-body {
        height: 65px;
    }

    .uni-card {
        margin: 4px 0 !important;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, .3);
    }

    .image {
        width: 100%;
    }
</style>
